<template>
  <div class="register-container">
    <h2 class="register-title">用户注册</h2>
    <el-card class="register-card">
      <el-form :model="registerData" :rules="rules" label-width="100px" ref="registeFormRef">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerData.username"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="registerData.password"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input type="password" v-model="registerData.confirmPassword"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerData.email"/>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="registerData.realName"/>
        </el-form-item>
        <el-form-item label="职能" prop="role">
          <el-select v-model="registerData.role" placeholder="请选择职能">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-button type="primary" @click="submitForm(registeFormRef)">注册</el-button>
        
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { h, ref } from 'vue';
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router';

const registeFormRef = ref()

const validateConfirmPassword = (rule, value, callback) => {
  if (value !== registerData.value.password) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
};

const options = ref([{
  value: 'lab',
  label: '实验室人员'
}, {
  value: 'office',
  label: '质量办公室人员'
}]);

const registerData = ref({
  username: '',
  password: '',
  confirmPassword: '',
  email: '',
  realName: '',
  role: ''
});

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' }
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择职能', trigger: 'blur' }
  ]
};

const submitForm = async (formEl) => {
  console.debug("start submit");
  if (!formEl) return;
  console.debug("start valid");
  var valided = true;
  await formEl.validate((valid) => {
    if (!valid) {
      ElMessage({
        message: h(
          "span", null, "请按要求填写信息"
        )
      });
      valided = false;
      return false;
    }
  })
  if(!valided)return false;
  // 请求后端注册接口
  const {data} = await axios.post(
    "http://localhost:8080/api/auth/register",
    {
      username: registerData.value.username,
      password: registerData.value.password,
      email: registerData.value.email,
      realName: registerData.value.realName,
      roleName: registerData.value.role,
    },
  )
  
  var success = false;

  if (data.code == 200) {
    success = true;
  }

  if (success) {
    ElMessage({
      message: h(
        "span", null, "注册成功"
      )
    })
    router.push({path:"/"}).then(() => {router.go()});
    return true;
  }else{
    ElMessage({
      message: h(
        "span", null, "注册失败"
      )
    })
    return false;
  }

};



</script>

<style scoped>
.system-title {
  font-size: 48px;
  font-weight: bold;
  position: absolute;
  top: 16px;
  left: 16px;
}

.register-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: center;
  margin-top: 0px;
}

.register-title {
  font-size: 36px;
  font-weight: bold;
  margin-top: -50px;
  /* 将标题向上移动自身高度的一半，以使其垂直居中 */
}


.register-card {
  width: 400px;
  padding: 20px;
}
</style>